CSS Dropdown Menu: A Modern, Accessible Multi-Level Menu

By Aigars Silkalns Updated Oct 30, 2026 10 min read

The modern CSS dropdown menu is a real <button> that toggles aria-expanded, a nested list that shows or hides from that state, and a few lines of CSS for the look. You can still style it with gradients, rounded corners and shadows, as the 2010 version did. What has changed is everything underneath: no gradient image, no vendor prefixes, no IE filters, and a menu that works with a keyboard, a touchscreen and a screen reader.

This tutorial builds a two-level menu with a compact stylesheet and about 25 lines of JavaScript, and explains each choice so you can adapt it.

A dark rounded navigation bar with the Work item open, showing Branding, Web design and a Print item with a second-level submenu containing Posters and Packaging — The finished menu with both levels open.

Why the old hover-only dropdown no longer works

The original dropdown relied on li:hover ul { display: block }. That pattern fails in three places. Touch screens have no real hover, so the first tap either does nothing or follows the link. Keyboard users tabbing through the page never trigger :hover, so the submenu stays hidden. And screen readers get no hint that a submenu exists.

The fix is to separate the two jobs that a top-level item used to do. A link goes to a page. A button opens a group of links. The W3C’s disclosure navigation example describes exactly this pattern, and it is simpler and more robust than the full ARIA menu role, which is meant for application menus like File and Edit, not site navigation.

Step 1: Write the markup

Use a nav landmark with a label, nested unordered lists, and one button per group. Link the button to its list with aria-controls and start with aria-expanded="false".

<nav aria-label="Main">
  <ul class="menu">
    <li><a href="/" aria-current="page">Home</a></li>
    <li>
      <button type="button" aria-expanded="false" aria-controls="menu-work">Work</button>
      <ul class="submenu" id="menu-work">
        <li><a href="/work/branding">Branding</a></li>
        <li><a href="/work/web">Web design</a></li>
        <li>
          <button type="button" aria-expanded="false" aria-controls="menu-print">Print</button>
          <ul class="submenu" id="menu-print">
            <li><a href="/work/print/posters">Posters</a></li>
            <li><a href="/work/print/packaging">Packaging</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li>
      <button type="button" aria-expanded="false" aria-controls="menu-about">About</button>
      <ul class="submenu" id="menu-about">
        <li><a href="/about/team">Team</a></li>
        <li><a href="/about/contact">Contact</a></li>
      </ul>
    </li>
  </ul>
</nav>

Without CSS or JavaScript this is still a valid nested list of links, which is a good baseline. Mark the current page with aria-current="page" so it is announced and can be styled.

Step 2: Style the bar, with the gradient in CSS

The 2010 menu needed a semi-transparent PNG for its shine. Today a linear-gradient() does it, and color-mix() derives the lighter top colour from the base colour, so changing one custom property recolours the whole menu. Colours use oklch(), which keeps lightness steps perceptually even. Use logical properties (inset-inline-start, margin-inline-start) so right-to-left layouts work without extra rules.

:root {
  --menu-bg: oklch(0.32 0.03 255);
  --menu-ink: oklch(0.97 0.01 255);
  --menu-accent: oklch(0.72 0.14 235);
  --menu-radius: 0.75rem;
}
.menu, .submenu { margin: 0; padding: 0.375rem; list-style: none; }
.menu { display: flex; gap: 0.25rem; width: fit-content;
  background: linear-gradient(to bottom, color-mix(in oklab, white 18%, var(--menu-bg)), var(--menu-bg));
  border-radius: var(--menu-radius); box-shadow: 0 0.5rem 1.5rem oklch(0 0 0 / 0.25), inset 0 1px 0 oklch(1 0 0 / 0.2); }
.menu li { position: relative; }
.menu a, .menu button { display: flex; align-items: center; gap: 0.5rem; width: 100%; box-sizing: border-box;
  padding: 0.6rem 1rem; border: 0; border-radius: calc(var(--menu-radius) - 0.25rem); background: none;
  color: var(--menu-ink); font: inherit; font-weight: 600; text-decoration: none; text-shadow: 0 -1px 0 oklch(0 0 0 / 0.4); cursor: pointer; text-align: start; }
.menu a:hover, .menu button:hover, .menu button[aria-expanded="true"] { background: color-mix(in oklab, var(--menu-accent) 30%, transparent); }
.menu :is(a, button):focus-visible { outline: 3px solid var(--menu-accent); outline-offset: 2px; }
.menu button::after { content: ""; inline-size: 0.45em; block-size: 0.45em; margin-inline-start: auto;
  border-inline-end: 2px solid currentColor; border-block-end: 2px solid currentColor; rotate: 45deg; translate: 0 -0.1em; transition: rotate 0.2s; }
.menu button[aria-expanded="true"]::after { rotate: 225deg; translate: 0 0.1em; }
.submenu { position: absolute; inset-block-start: calc(100% + 0.5rem); inset-inline-start: 0; z-index: 10; min-inline-size: 13rem;
  background: var(--menu-bg); border-radius: var(--menu-radius); box-shadow: 0 0.75rem 2rem oklch(0 0 0 / 0.3);
  opacity: 0; visibility: hidden; translate: 0 -0.5rem; transition: opacity 0.18s, translate 0.18s, visibility 0s 0.18s; }
.submenu .submenu { inset-block-start: 0; inset-inline-start: calc(100% + 0.5rem); }
button[aria-expanded="true"] + .submenu { opacity: 1; visibility: visible; translate: 0 0; transition-delay: 0s; }
.submenu button::after, .submenu button[aria-expanded="true"]::after { rotate: -45deg; translate: 0; }
.submenu::before { content: ""; position: absolute; inset-block: 0; inset-inline: -0.5rem; } /* hover bridge across the gap */
.menu > li > .submenu::before { inset-block-start: -0.5rem; }
@media (hover: hover) and (pointer: fine) {
  .menu li:hover > .submenu { opacity: 1; visibility: visible; translate: 0 0; transition-delay: 0s; }
}
@media (prefers-reduced-motion: reduce) { .submenu, .menu button::after { transition: none; } }
@media (max-width: 40rem) {
  .menu { flex-direction: column; width: auto; }
  .submenu, .submenu .submenu { position: static; display: none; opacity: 1; visibility: visible; translate: none; box-shadow: none; background: oklch(0 0 0 / 0.2); margin-inline-start: 1rem; min-inline-size: 0; }
  button[aria-expanded="true"] + .submenu { display: block; }
}

Key points in that stylesheet:

State comes from the attribute. button[aria-expanded="true"] + .submenu shows the list. The visual state and the accessible state can never drift apart, because they are the same thing.
Hidden means unreachable. The closed submenu uses visibility: hidden, so its links leave the tab order and the accessibility tree. The visibility transition with a delay lets the fade finish before hiding. Opacity alone would leave invisible links focusable.
No dead zone between levels. Submenus sit half a rem away from their parent, and that gap belongs to neither element, so the pointer would lose :hover while crossing it. The .submenu::before rule adds an invisible bridge that fills the gap. It is a child of the submenu, so hovering it keeps the whole chain open. While the menu is closed it is visibility: hidden and cannot catch the pointer.
Hover is an enhancement. The @media (hover: hover) and (pointer: fine) block opens submenus on mouse hover only for devices that really hover. Touch and keyboard still use the button. One side effect on desktop: a menu opened by hover and a menu opened by a click can be showing together, because hover does not touch aria-expanded. The script closes siblings on click, but not on hover. If that bothers you, drop the hover block and rely on the button alone.
Visible focus. :focus-visible draws a ring for keyboard users without showing it on mouse clicks. Never remove the outline without replacing it.
Reduced motion. prefers-reduced-motion switches the transitions off for people who ask for it.
The chevron is a pseudo-element. A bordered square rotated 45 degrees replaces the icon image, and the individual rotate and translate properties animate it without touching transform.

Step 3: Add the toggle script

JavaScript only has to flip aria-expanded, close siblings so two menus are never open together, close everything on an outside click, and handle Escape.

const toggles = document.querySelectorAll('.menu button[aria-expanded]');
const close = (btn) => btn.setAttribute('aria-expanded', 'false');
toggles.forEach((btn) => {
  btn.addEventListener('click', () => {
    const open = btn.getAttribute('aria-expanded') === 'true';
    const siblings = btn.closest('ul').querySelectorAll(':scope > li > button[aria-expanded]');
    siblings.forEach(close);
    btn.setAttribute('aria-expanded', String(!open));
  });
});
document.addEventListener('click', (e) => {
  if (!e.target.closest('.menu')) toggles.forEach(close);
});
document.addEventListener('keydown', (e) => {
  if (e.key !== 'Escape') return;
  const active = document.activeElement;
  const open = [...document.querySelectorAll('.menu button[aria-expanded="true"]')]
    .filter((b) => b === active || b.nextElementSibling.contains(active));
  const target = open.at(-1); // the innermost open menu
  if (!target) return;
  close(target);
  target.focus();
});

Escape closes the innermost open menu and returns focus to its button, so a keyboard user is never left on a link that just disappeared. Tab and Shift+Tab move through the open links naturally because the submenu sits right after its button in the DOM. No arrow-key handling is required for this pattern, which is why the disclosure approach is less code than a full menu widget.

The same open menu with a blue keyboard focus ring around the Packaging link in the second-level submenu — Keyboard focus: the ring sits inside the padded bar, so it stays visible against the dark background.

Step 4: Make it work on small screens

On narrow viewports a floating panel is awkward, so the stylesheet’s max-width query stacks the bar and turns submenus into indented, in-flow lists that expand under their button. The same markup and the same script serve both layouts. For a real site, wrap the whole menu in a second toggle button (a hamburger) at this breakpoint. Use aria-expanded on that one too.

The same menu on a 390 pixel wide screen, stacked as one column with the Work group expanded inline to show Branding, Web design and Print — On a phone the bar stacks into one column and submenus open inline under their button.

Popover API and anchor positioning: Baseline status in 2026

Two platform features target the same problem, and both are far enough along to use with a fallback. As of October 2026, according to the web-features data that powers MDN’s Baseline badges:

The Popover API is Baseline newly available since January 2025 (Chrome and Edge 116, Firefox 125, Safari 17 and iOS Safari 18.3 for the full feature). Most of its methods and events have worked in all major browsers since April 2024.
CSS anchor positioning works in Chrome and Edge 125, Safari 26 and Firefox 147, so its core (anchor-name, position-area, position-try-fallbacks) has been Baseline newly available since January 2026. The feature as a whole is not yet labelled Baseline, because newer parts such as position-visibility and the auto and normal keywords of position-anchor still wait on Safari 27 or recent Chrome and Firefox releases. Avoid those parts for now.

Newly available means every current browser supports it, but people on older devices still exist. So treat these as a progressive enhancement. The snippet below builds a simple one-level menu with no script: the Popover API opens it, closes it on Escape or an outside click and returns focus to the button, and anchor positioning places it under the button inside an @supports block. Where anchor positioning is missing, the panel still opens, centred in the viewport by the browser’s default popover styles, so nothing breaks.

<button type="button" class="more" popovertarget="more-menu">More</button>
<ul id="more-menu" class="more-panel" popover>
  <li><a href="/work/branding">Branding</a></li>
  <li><a href="/work/web">Web design</a></li>
  <li><a href="/about/contact">Contact</a></li>
</ul>

.more { anchor-name: --more; }
.more-panel { margin: 0; padding: 0.375rem; list-style: none; min-inline-size: 12rem;
  background: var(--menu-bg); color: var(--menu-ink); border: 0; border-radius: var(--menu-radius); }
.more-panel a { display: block; padding: 0.6rem 1rem; color: inherit; text-decoration: none; }
@supports (position-area: block-end) {
  .more-panel { position-anchor: --more; position-area: block-end span-inline-end;
    margin-block-start: 0.5rem; position-try-fallbacks: flip-block; }
}

I tested this in Chromium: the panel opens flush under the button, Escape closes it and puts focus back on the button, and a click elsewhere dismisses it. The colour variables come from the stylesheet in step 2. position-try-fallbacks: flip-block moves the panel above the button when there is no room below. The catch is nesting. A popover inside a popover works, but the hover behaviour and sliding second level from this tutorial would need extra script, so for multi-level site navigation the disclosure buttons above remain the more predictable choice.

Accessibility checklist

Top-level items that open a group are button elements, not links to #.
Each button has aria-expanded that matches what is visible, and aria-controls pointing at its list.
Closed submenus are removed from the tab order with visibility: hidden or display: none.
Escape closes the open menu and restores focus to its button.
Focus rings are visible and have enough contrast against both the bar and the page. Measured contrast of the menu text (WCAG relative luminance, sRGB values computed from the OKLCH colours): 11.6:1 on the bar base, 7.0:1 on the lightest part of the gradient, and at least 4.9:1 on the hovered or expanded item (the accent tint is deliberately kept at 30%, because 55% measured only 3.6:1 to 4.4:1). The focus ring measures 5.2:1 against the bar.
Click targets are at least 24 by 24 CSS pixels (WCAG 2.2 target size minimum). With 0.6rem of vertical padding and the inherited line height, items are about 41 pixels tall at a 16px font size, which you can confirm in DevTools.
On small screens the top-level bar itself needs a hamburger toggle with its own aria-expanded. The demo stacks the bar but does not hide it.
On desktop, hover plus click can leave a hover-opened menu and a button-opened menu visible together. Decide whether that is acceptable, or remove the hover enhancement.
Hover never carries information that is unavailable by tap or keyboard.

Where to go next

If you want a ready-made version, our Bootstrap 5 snippets cover the common cases: a responsive navbar with dropdown menus, a navbar with multi-level dropdown submenus, an account dropdown menu, and a navbar with a mega menu. For a sliding highlight under the active item, see the animated menu with sliding indicator. If you prefer a full-page mobile pattern, try the navbar with an offcanvas menu.

285 comments from the archive

choen says:

Feb 23, 2010 at 7:37 am

nice tuts. btw why not using css3 gradient for background
Andy Gongea says:

Feb 23, 2010 at 7:39 am

Flawless. Great work Nick, this css menu is very well executed. Kudos
EvilDr says:

Feb 23, 2010 at 8:50 am

Erm, it doesn’t work on my IE3 (hehe…)
Cristina Sturm says:

Feb 23, 2010 at 9:28 am

Wow, I loved the “1-piece-o-image” trick for the gradients, I would never think of that! Thanks!
doc says:

Feb 23, 2010 at 11:36 am

Very goos stuff. Clean, simple and effective. Great stuff. Thas’s we love CSS
randsco says:

Feb 23, 2010 at 12:11 pm

Looks nice, Nick! (Bookmarked for later reference)

Hopefully IE9 will support the border-radius property (though I have no problem with IE users seeing boxy navigation … you pick IE for your browser, you suffer!)
kesc says:

Feb 23, 2010 at 12:48 pm

Very nice! And the nicest part is that it actually looks good also in non-CSS3 browsers (at least in IE8).

A great example of using CSS3 while still giving non-supported browsers a decent alternative. I don’t think anyone visiting via IE8 would feel that something was out of place / did not work properly.
matthew Aebersold says:

Feb 23, 2010 at 12:56 pm

Awesome tutorial! Thank you for this, I will try this code out very soon!
Les says:

Feb 23, 2010 at 1:24 pm

Fyi on an unrelated note, a script on this page seems to be causing an error in ie6, 7 and 8. ie6 & 7 can’t open the page, while 8 provides this dom warning: “Unable to modify the parent container element before the child element is closed”

The menu demo works fine though.
Mary Lou says:

Feb 23, 2010 at 1:41 pm

This is a really good tutorial and a beautiful menu, thanks a lot! Very smart usage of the gradient!
glynn says:

Feb 23, 2010 at 2:22 pm

Really nice, however can I just ask, is the first-child / last-child and the “>” supported in all browsers because I have been containing my drop down ul’s within the li of the root list and using li:hover ul{display: block} etc. which gives slightly messier markup. If these are supported widely i’ll be changing my ways in the future
glynn says:

Feb 23, 2010 at 2:26 pm

Ha sorry i just looked at the source and the markup is the same as i have been doing it, just a differrent method of selection. I do love the recyclable gradient though, saves making lots of 1px images for a simple colour change, good for colour changing for accessibility style sheets!
Sarah Sarniak says:

Feb 23, 2010 at 4:11 pm

CSS3 has such cool features. I wish that so many people didn’t use IE6 so I could just stop checking for compatibility in that browser so I could use all the cool things for CSS3
Ben Teoh says:

Feb 23, 2010 at 4:47 pm

The more I look into CSS3, the more I’m loving it. I’ll have to implement this into my next site!
capsiplex says:

Feb 23, 2010 at 5:27 pm

I will try this code out very soon!
Next Day Flyers says:

Feb 23, 2010 at 5:35 pm

I like the gradient too. I hope to use the script in some upcoming work.
vei says:

Feb 23, 2010 at 9:22 pm

css3 is so good ，i hate IE！very！
Helen says:

Feb 23, 2010 at 9:37 pm

An image with code instead of text. Great!
Susan says:

Feb 23, 2010 at 10:37 pm

I don’t seem to be able to tab through anything except the top level menus, so it wouldn’t be accessible, which is a “breaker” for me.
john says:

Feb 24, 2010 at 12:42 am

what is your website worth?

free check here…

websitereckon.com

thanks
Daniel Long says:

Feb 24, 2010 at 4:09 am

This is a really good technique and will definitely give it a go myself when doing my next piece of web design. I think it is a really stylish navigation bar, and something that could be incorporated into a lot of designs. Even in the supported browsers it doesn’t look so bad. Definitely worth trying out.
Ulrik Hvide says:

Feb 24, 2010 at 11:13 am

Nothing special about the method you use except the nice use of css3 features such as drop shadow and rgba.
Tutorial City says:

Feb 24, 2010 at 11:52 am

Opera 10.5 Beta already supports border-radius, so I think it would be better to include also ‘border-radius’ (two last selectors).

Adding transitions would take this effect to the next level!
Michael van Leest says:

Feb 24, 2010 at 5:55 pm

I have some issues with submenu’s being hidden under a other div below the menu (containing a mbScrollable banner rotator).

Any ideas how to fix this issue??
Patrick Offczorz says:

Feb 24, 2010 at 6:09 pm

Thanks for this Post.
@bolo IE6 ??? What this ? :)
Iria says:

Feb 24, 2010 at 11:15 pm

I don’t know…
the article is very interesting to learn some CSS3 functions but on IE6 this is just a mess. I know we should just let IE6 die alone in its misery but at least I’d like my menus to be usable by everyone.
rony says:

Feb 25, 2010 at 12:23 am

hi Friends

what is your website worth?

free check here…

websitereckon.com

thanks
gokhan says:

Feb 25, 2010 at 3:47 am

It seems pretty complicated to make dropdown multi level menus, thanks for bringing up the code with explanation.
Tom Fotherby says:

Feb 25, 2010 at 5:08 am

Very impressive! I went to the demo and did “view source” and was totally blown away by the simplicity and elegance of the HTML and CSS with no JS. Thanks for teaching me a bunch of tricks in one article. The “gradient image” trick is particularly inspiring.

Bring on CSS3 compatibility and the death of IE6 market share…
Geektantra says:

Feb 25, 2010 at 6:13 am

Nice work. Only one thing missing “hoverIntent”. Having hover intent on to this will make it look really great.

Regards,
GeekTantra
Invisible URL says:

Feb 25, 2010 at 8:15 am

Ahhhh…a very nice tutorial mate. Thanks for sharing the dropdown menu with us :)
Nick Parsons says:

Feb 25, 2010 at 11:37 am

Impressive, Nick. I love that fact that it still looks so great even in faulty browsers, and even sleeker in CSS3 compatible agents. I’m excited to use this in my next project!
kok aan huis says:

Feb 25, 2010 at 12:05 pm

It looks good in the non supporting browsers also :-)
Didrik Nordström says:

Feb 25, 2010 at 4:02 pm

Iria: For IE6, you could use a separate stylesheet, with a completely different look. Make it look like crap. Make IE6-user wish for a better browser :)
Scavinzer says:

Feb 26, 2010 at 2:36 am

Wow….My heart is too full for words. It work Fantastic Skill!
Skyrocket Labs says:

Feb 26, 2010 at 7:30 am

Nicely done. I’m going to experiment with this puppy.
Rick says:

Feb 26, 2010 at 10:40 am

Thanks, I really like the gradient over a solid color trick… gonna have to use that now
Roy Vincent says:

Feb 27, 2010 at 7:49 am

I think the concept of this is similar with sucker fish…
GwenDragon says:

Feb 28, 2010 at 7:53 am

Opera 10.50 beta shows the blue background color of the selected menue entry not in rounded corners like Firefox, Safari or Chrome.

In your code is something missing. ;)
If you change the CSS for first-child and last-child the menue does work correctly in Opera 10.50.

#nav ul li:first-child > a { border-top-left-radius: 9px; border-top-right-radius: 9px;
-webkit-border-top-left-radius: 9px; -moz-border-radius-topleft: 9px; -webkit-border-top-right-radius: 9px; -moz-border-radius-topright: 9px; } #nav ul li:last-child > a { border-bottom-left-radius: 9px; border-bottom-right-radius: 9px; -webkit-border-bottom-left-radius: 9px; -moz-border-radius-bottomleft: 9px;
-webkit-border-bottom-right-radius: 9px; -moz-border-radius-bottomright: 9px; }

Kind regards from germany
GwenDragon
jinilon kelly says:

Mar 1, 2010 at 12:29 pm

hi Friends

what is your website worth?

free check here…
…………………………………………….
websitereckon.com
………………………………………………….
thanks
wptidbits says:

Mar 2, 2010 at 9:17 pm

From what i read, currently only few browsers supporting CS3. That means, those major browsers should be. Worth to try over. Anyway, excellent design there you have. Keep sharing. Thanks in advance!
Diego says:

Mar 3, 2010 at 10:04 pm

Another hacks to bring this script in Opera 10.50:

/* main level link */ #nav a { font-weight: bold; color: #e7e5e5; text-decoration: none; display: block; padding: 8px 20px; margin: 0;
border-radius: 1.6em; /* This was added */ -webkit-border-radius: 1.6em; -moz-border-radius: 1.6em; text-shadow: 0 1px 1px rgba(0,0,0, .3); } /* sub levels link hover */ #nav ul li:hover a, #nav li:hover li a { background: none; border: none; color: #666; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; /* This was added */ } #nav ul a:hover { background: #0078ff url(img/gradient.png) repeat-x 0 -100px !important; color: #fff !important; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; /* This was added */
text-shadow: 0 1px 1px rgba(0,0,0, .1); }

With this in mind, the script works perfect in Opera 10.50

Greetings!
Vladimir says:

Mar 7, 2010 at 2:20 pm

very god, thank you – this dropMeny wil definatelly be sold anywhere for any client. I really like your posts. One question only – if we get stuck wit some of works, can we contact yu for help? Thanks
Sam Ng says:

Mar 8, 2010 at 3:09 am

wish we have only one type of browser!
citywebstudio says:

Mar 9, 2010 at 2:27 am

best price website design…..goood quality best designers….
citywebstudio co uk
Adrian says:

Mar 12, 2010 at 9:54 am

Wow there is a lot of spam on these comment boards!

Anyhowz, Thanks for this great description on setting up a css3 drop down menu. I have been a big fan of suckerfish and superfish drop down menus, but can see them getting replaced by techniques similar to this.

Thanks Again.
Terry Reilly says:

Mar 18, 2010 at 4:46 pm

Thanks, for a great post. I have learned so much from this (and your site) about CSS.
Thanks Again
Ryan says:

Mar 19, 2010 at 5:33 am

I love your idea about using a transparent gradient image with varying intensities to control on-screen gradients. Very reusable and friendly. I like to use PNGs for transparency; however, since you are applying it as a filter without rounded corners, a GIF would work just as well and be supported by older versions of IE?
Medya says:

Mar 19, 2010 at 8:42 am

Excellent tutorial. I have learned so much from this about CSS.
Thanks, for a great post…
Hong DUc says:

Mar 21, 2010 at 8:12 am

Can anyone clear me up the usage of ” > ” in CSS, I’ve have never seen nor used them in my css, is it a new feature in CSS 3 ?
Robert says:

Mar 21, 2010 at 8:38 am

A child selector matches when an element is the child of some element. A child selector is made up of two or more selectors separated by “>”.
Michael says:

Mar 22, 2010 at 11:58 pm

once again awesome. thanks very much. Its easy to pull the code if you view the source of the demo. All you need to do is grap the gradient image. You can work out where it is.

cheers
brad says:

Mar 23, 2010 at 5:48 pm

Great tutorial, loved it. Been looking all over the web maybe someone can help. Say I wanted the items underneath my projects to be all different colors, how would I go about doing that? Have one roll over with blue, then another yellow or anything like that. Thanks again for the tut and any help.
Johan says:

Mar 31, 2010 at 1:54 pm

I´m new with css and css3 and want to learn more about it. Like how the HTML-code is in this tutorial.
jocelyn says:

Apr 14, 2010 at 10:46 am

Great works, i hope that microsoft will finally one day accept what other browser do natively

Thank’s again
JimmyJam says:

Apr 14, 2010 at 6:07 pm

Nice.
Quick Question (I’m a total rookie):
What’s the exact code that makes the list (er, menu) horizontal rather than vertical? Or how would one make it vertical?
Also, did you post the png graphic you used (I like the version without it though, but I wanted to check it out).
giorgos evagelou says:

Apr 23, 2010 at 1:55 pm

i just tested and it works! its amazing… thnx
MatheusMK3 says:

Apr 23, 2010 at 9:28 pm

Can you do that too on the top menu, where is index, etc, like in Mac OS X, the split buttons effect?
Thanks, still a great work!!!
Saiko_sama says:

Apr 29, 2010 at 2:55 am

Great work, just one question :
on the demo you put the class=”current” on “home”, it works. As long as you will put the current class un the 1st lvl it’s fine to get the nice effect, but what if you put it on “N.Design Studio”, how do you get it to work so that “My project” still gets the nice grey rounded effect ? It’s someting about selecting the parent of the .current class, which is impossible in css, you can select childs with >, but a < selector does not exist.
I don’t know if I’m very clear about my thoughts don’t hesitate to ask me further questions

Nevertheless : NICE work once more !!
singgum3b says:

May 5, 2010 at 4:15 am

Hey! I have a question about background tag shorthand:
background: #7d7d7d url(img/gradient.png) repeat-x 0 -110px;
What does “0 -110px;” stand for? I guess it affect the transparency of the image,
but i found nothing about this shorthand structure even on w3.org!! (just none about opacity in this). Still firefox 3.6,ie 8, chrome support it (OMG).
This is cool, but i still want to know where it come from.
Heeeeeellllllllllllllpppppppppp!!!
singgum3b says:

May 5, 2010 at 4:35 am

Haz! I figure it out!
It’s just placement of png’s transparent area, none related to opacity control.
a bit dissapointed but this still a good technique. Thank alot!!
singgum3b says:

May 5, 2010 at 4:49 am

@ saiko_sama: just add .current class to both of them =]
or, if it’s conflict, just made another class for it–> got the fx.
or , might you want to use just one class for the child , then select the parent through the child —> not much reality, why would you do so? since you can do the revesed easily? that why they just have > and not <.
Saiko_sama says:

May 5, 2010 at 10:42 am

Hi tank you singgum3b for the answer. Actually when I posted the comment I could not add any classe, I’m working with my client’s CMS and I did not have access to the code that generated the menu so I could not modify anything.
I finaly got in touch with the admin of the CMS ( not an open source one, hélas…) who accepted to give me the piece of code so I can now modify my menu : Yeahhh ^^

Have a nice day ;)
Hutch says:

May 12, 2010 at 7:09 pm

Your none image version isn’t working to display the sub level navigation (hover over N.Design Studio, the flyout is hidden) in IE7. The image one is working in IE7 to display this. I’ve compared your css and other than the image, there isn’t any difference (that I saw). Any chance you know what it is? I’d like to use this, but IE7 is still a widely used browser so I’d like it to render properly there as well. Any help would be greatly appreciated.
Pariuri Sportive says:

May 13, 2010 at 5:22 pm

I HATE using Word for this kind of effect. It’s extremely limiting. I just completed an assignment for a set of wedding banquet place cards. The bride had already bought a set of those preforated sheets to run on a desktop printer.

She had the guest list on an Excel document and wanted to use Word’s “Mail Merge” labeling feature to run them off. That would have been fine, except that she wanted a particular color for the font, and a specific color and offset for the drop shadow. I couldn’t get the effect needed from Word’s “Word Art” feature.

So, I ended up, after wasting a lot of time showing her the problems, doing it in InDesign. I knew that appication well enough to do a quick template layout and running text boxes for me to place the names, with my “style sheets” to automatically add the drop shadow effect we wanted.
No criticism of you intended, but I will point out, again, that designers have a LOT of different applications to do their job. Photshop is good for some things. Illustrator for others.

Still others for InDesign, Word, Excel, Flash, Dreamweaver and so on. The more in my “tool box” the better I can do different jobs. As I like to point out, by analogy, one CAN drive a nail with the flat side of a box wrench, but a hammer does a better job of it.
Sivaranjan says:

Jun 1, 2010 at 1:13 pm

Lovely post, i had been struggling to find something like this for quite a while. Thanks a lot for sharing. I am going to add it to my CSS aggregator site.
Sneha says:

Jun 9, 2010 at 1:27 am

its not working in the IE. pls help
Rod says:

Jun 9, 2010 at 8:12 am

Hi,
It’s a great demo, however like Hutch, i found that your non-image or pure CSS3 version does not work in IE7. The sub menus do not show at all unfortunately. Any advice on this would be appreciated.

Thanks.
Css Collector says:

Jun 13, 2010 at 3:27 am

Nice css dropdown menu, but what about adding a simple dropdown effect?
Okcoola says:

Jun 13, 2010 at 5:05 am

This is “CSS3” Dropdown Menu , IE7 does not support CSS3 very well.. upgraded to IE8+ ..
Kelly Johnson says:

Jun 18, 2010 at 10:28 am

Hey Pariuri-
I sure hope you used dynamic data fields in your InDesign template to import that Excel file and avoid having to type all those names!

I agree, there are many tools for us designers and many functions within each.
John Athayde says:

Jun 24, 2010 at 4:07 pm

@Rod/@Sneha – This won’t work in MSIE 7 and lower as these attributes aren’t available. You will have to provide some other kind of menue if you need to support those browsers. You could also look at trying something like Modernizr.js or eCSStender to push those browsers to mimic CSS3 attributes.
Janak says:

Jun 26, 2010 at 12:26 pm

Awesome resource (and, awesome site design too… you rock :) ).
One question, will the CSS3 + Image version work on IE-6/7?
(I dont mind if fancy stuff does’t work, will the basic dropdown stuff work on IE6/7?)

thanks
Janak
tibo says:

Jun 26, 2010 at 5:42 pm

Hi,
great work on this menu but I use a HTML 4.01 Transitional doctype and while its working perfect on Chrome & Firefox, it’s not working on IE8.
I’m not well informed about those doctypes stuffs so am I missing something here ? or is it only compatible with XHTML docs ?
Thanks.
robb says:

Jul 2, 2010 at 10:05 am

your work is very nice zacariaslavin (I’ve seen in safari)
Cody Swann says:

Jul 7, 2010 at 10:43 am

Good stuff Nick.

Any chance you looked at performance differences with css3 gradients vs background image?
Web Guy says:

Jul 7, 2010 at 12:03 pm

love the design of your site. great css tutorial you ahve here.
Web Guy says:

Jul 7, 2010 at 12:05 pm

thanks for the tip. been working with css drop down menus for a while now and i love it. CSS is so easy to work with.
Jacob says:

Jul 12, 2010 at 3:51 pm

Can someone explain what the “>” does in the css. Like on “li:hover > a”
Thanks.
will ceare says:

Jul 23, 2010 at 3:03 am

Nice CSS tutorial, i really like the fact its all browser compatible, too often i see really good tutorials, but they don’t work in IE mainly. I will be sure to use this in my next site. thanks
Ian Topple says:

Jul 30, 2010 at 10:12 am

This isn’t working. Everything was working fine until I added the #nav li: hover > ul and put in the display:block; When I mouse over the links, the child uls do not pop up. Any advice?
webmaster says:

Aug 2, 2010 at 2:48 am

Nice CSS tutorial, i really like the fact its all browser compatible, too often i see really good tutorials, but they don’t work in IE mainly. I will be sure to use this in my next site. thanks
EMR Software says:

Aug 4, 2010 at 12:42 am

Thanks for the post, it really helped me to solve the CSS Problem.
Chris CC says:

Aug 4, 2010 at 10:43 pm

Awesome tutorial….but where do go to download the source code?
Chris CC says:

Aug 4, 2010 at 10:43 pm

Where do i go to download the source code?
ricky says:

Aug 12, 2010 at 2:33 am

adding this line to eliminate border when you click the link

* {
outline: none;
-moz-outline-style:none;
}
Arturex says:

Aug 25, 2010 at 7:07 pm

[TO:Leonard on comment 165] I believe the reason it hides the sub menu on ie7 its because is showing behind the image, did you try it without that image and perhaps playing with the z-index parameters
jackcheng says:

Aug 31, 2010 at 3:43 am

Click the “view demo” link . After entering the demo page rightclick and page save as…
Chris says:

Sep 4, 2010 at 8:17 pm

These are all very nice but in Opera, the gradient image shows rectangular, not rounded!
Cheers
seolar says:

Sep 12, 2010 at 4:03 pm

A really nice and really helpful tutorial for creating well looking css navigations. I like this tutorial very much and I will create it now for my own. Only for testing this one. Please keep on writing tuts like this one and all the others more!

Thanks for this article!
24HR San Diego Mobile Notary says:

Sep 14, 2010 at 10:40 pm

Wow! These look really nice. Great work on giving us all a step-by-step tutorial on your drop-down menus. Thanks.

Another great article.

Kurt
24HR San Diego Mobile Notary
damian says:

Sep 17, 2010 at 8:11 am

@Leonard.

Did you resolve the IE7 issue?

I have played around with the z-index as I have a Nivo Slider div and the drop-down just won’t appear over it, just tucked behind. Grrr.
Damian says:

Sep 22, 2010 at 3:00 am

I finally got it to work in IE7 and html5. All I did was give the that contains the with the dropdown the highest z-index. So far so good.
Damian says:

Sep 22, 2010 at 3:01 am

Oops – my comment has dropped the html tags of ‘header’ and ‘nav’ within.
Melvins says:

Oct 1, 2010 at 5:24 am

I saw the demo and I really like dropdown menu. Rounded buttons looks better that the square one. I must say that the code given by youis very useful to all the designers and I will also implement it in my website.

Los Angeles Web Design
mens ties says:

Oct 4, 2010 at 10:22 am

This article gives the light in which we can observe the reality. This is very nice one and gives in depth information. Thanks for this nice article. Good post.. ..Valuable information for all.
djrayon says:

Oct 7, 2010 at 5:08 pm

To work with IE7 you have to brake it down in 3 files.

navigation-base.css
navigation-ie7.css
navigation-ie8.css

Now.

In you IE7 file you have the gradient code
for the 3 things, in the ie8 file you have filter version.

in the base you remove the filter property.

And you load them into your html with conditional commenting gte IE 8 and lt 8
jacky says:

Oct 7, 2010 at 10:07 pm

This is a smart blog. I mean it. You have so much knowledge about this issue, and so much passion. You also know how to make people rally behind it, obviously from the responses. Youve got a design here thats not too flashy, but makes a statement as big as what youre saying. Great job, indeed.
R.D. Pullen says:

Oct 9, 2010 at 3:35 am

I surrounded the menu with a div to position it and then added the line below. This sets a regular width for the main line and also centres the item text.

div > ul > li > a {width:100px; text-align:center; }

Thank you for this splendid page.
satya says:

Oct 25, 2010 at 1:36 am

how to buttons create in website desining send few tecnical points and examples and source code and complete website design and code send me my mail id
Steve C says:

Oct 25, 2010 at 9:19 pm

Hi, I cannot get it to work with IE7. The drop downs go behind anything else I have on screen and I cannot get them to appear in front. I’ve messed around with indexing but still no joy.

See the demo that doesn’t work on here…

Thanks for any help.
Busy Teacher says:

Oct 25, 2010 at 10:32 pm

Thanks for the great multi-level menu, hope you don’t mind if I use it on my website instead of the current one! Love the ‘Mac-ish’ look and the text shadows!
spb says:

Nov 10, 2010 at 2:05 pm

Great code! I have noticed that unless you have at least one menu item with the class=”current”, the page controls below the menu moves slightly on mouse-over the menu. This setting is crucial: “border-top: solid 1px..”. Any guess on what’s happening? N.B. I am using the non-image code version. Thanks.
Franklin says:

Nov 16, 2010 at 10:21 am

Nice drop-down menu and very detailed tutorial. Can I promote it on my site? I have other apps, widgets, and tools there. Feel free to check them out at appsandwidgets.net
Ulrich Pingel says:

Nov 18, 2010 at 7:55 am

Hi,
it’s a beautiful dropdown Menu, but I think if I select a 2nd-level submenu (e.g. MyProjects -> Web Designer Wall -> Design Job Wall) the first-level-selection (Web Designer Wall) have to highlighted as well … I think so …
Nevertheless – really beautiful.
Ulrich
hmm says:

Dec 3, 2010 at 10:37 pm

menu doesnt work in IE 6 …. forget the rounded stuff .. atleast it should work normal
PiT says:

Dec 5, 2010 at 6:50 am

I have found an issue for IE7 :

#nav li:hover a
{
display:inline-block;
}

great tutorial website, thanks
asdf says:

Dec 8, 2010 at 1:03 pm

Why omit the standard css3 attributes in some places, like box-shadow and border-radius? Nice way to not support browsers which are implementing them.
ron says:

Dec 12, 2010 at 8:46 am

I can’t manage to change direction of all thi menu to RtL
Walter Coots says:

Dec 13, 2010 at 7:12 pm

I second Ulrich’s sentiment. It would be nice if the link that activated a submenu stayed highlighted. The relation gets lost when the highlight disappears. Is there a way to do this without JavaScript? From what I can see, CSS selectors are unable to ascend.
Walter Coots says:

Dec 13, 2010 at 7:17 pm

Got it!
#nav ul li:hover { background:#cad5e9; }
meem says:

Dec 15, 2010 at 4:59 pm

Hey how can I download the menu? I’m new at this and I would like to use it
joseph says:

Dec 15, 2010 at 10:45 pm

great tutorial but I need help on how can I make drop down menu in an image button please help thanks :)
Juno Mindoes says:

Dec 23, 2010 at 10:22 pm

If you think black iphone 4 is a little dull, it’s your time to change it to a more delicate color. Let’s get the iphone 4 white!
Henry Peise says:

Dec 24, 2010 at 9:47 pm

Do you want the latest white iphone 4? Now we supply white iphone 4 Conversion Kit with elegant and delicate figures can surely be your best iphone 4 company.
RS says:

Dec 26, 2010 at 9:54 am

Thanks for sharing new information. I’ve never paid attention to such details before. I’ve also found a lot of nice CSS3 lessons. This one is just up to the topic: css3 video lesson . Hope, you’ll find it interesting.
SEO for Google says:

Dec 27, 2010 at 7:03 pm

This is great man. Thanks for the good work! SEO for Google
best iphone cases says:

Dec 27, 2010 at 8:55 pm

If I got a chance, i will prefer buying the iphone 4 white but not the iphone 4 Black. Who can tell me where is the Best iPhone Cases I would really want to take one. Best iPhone Cases and Covers, Sale iPhone 4 Cases, iPhone 3g Cases and Accessories
Aileen Xie says:

Jan 12, 2011 at 2:29 am

That is awesome! But what is the browser is IE, no radius & shadow are supported?
Rayroger says:

Jan 15, 2011 at 7:37 am

A small but interesting insight in to using CSS3. Thank you very much for sharing it. No matter how many different views people show or explain the use of CSS3 you always see a different side you did not see before.
nasim says:

Jan 19, 2011 at 3:47 am

that’s really nice,thank you,how can i download this code
Amelia says:

Jan 28, 2011 at 3:09 am

Hi, I tried to do a CSS3menu for the website http://www.shangpa.org. It works fine in all browsers except in IE. The children sub-menu simply wouldn’t show, could you please help to advise what is wrong? Thanks. Code as below:

ul#css3menu1,ul#css3menu1 ul{
margin:0;list-style:none;padding:0;background-color:#dedede;border-width:1px;border-style:solid;border-color:#5f5f5f;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;behavior: url(border-radius.htc)}
ul#css3menu1 ul{
display:none;position:absolute;left:0;top:100%;-moz-box-shadow:3.5px 3.5px 5px #000000;-webkit-box-shadow:3.5px 3.5px 5px #000000;box-shadow:3.5px 3.5px 5px #000000;padding:0 10px 10px;background-color:#FFFFFF;border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px;border-color:#d4d4d4;behavior: url(border-radius.htc)}
ul#css3menu1 li:hover>*{
display:block;}
ul#css3menu1 li:hover{
position:relative;}
ul#css3menu1 ul ul{
position:absolute;left:100%;top:0;}
/*
ul#css3menu1{
display:block;font-size:0;float:left;}
*/
ul#css3menu1{
display:block;font-size:0;float:left; z-index:1000;
}
ul#css3menu1 li{
display:block;white-space:nowrap;font-size:0;float:left;}
ul#css3menu1>li,ul#css3menu1 li{
margin:0;}
ul#css3menu1 a:active, ul#css3menu1 a:focus{
outline-style:none;}
ul#css3menu1 a{
display:block;vertical-align:middle;text-align:left;text-decoration:none;font:bold 14px Trebuchet MS,sans-serif;color:#ffffff;text-shadow:#FFF 0 0 1px;cursor:pointer;padding:10px;background-color:#670033;background-image:url(“mainbk.png”);background-repeat:repeat;background-position:0 0;border-width:0 0 0 1px;border-style:solid;border-color:#C0C0C0;}
ul#css3menu1 ul li{
float:none;margin:10px 0 0;}
ul#css3menu1 ul a{
text-align:left;padding:4px;background-color:#FFFFFF;background-image:none;border-width:0;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;font:14px Tahoma,sans-serif;color:#000;text-decoration:none;behavior: url(border-radius.htc)}
ul#css3menu1 li:hover>a{
background-color:#f8ac00;border-color:#C0C0C0;border-style:solid;font:bold 14px Trebuchet MS,sans-serif;color:#000000;text-decoration:none;text-shadow:#FFF 0 0 1px;background-image:url(“mainbk.png”);background-position:0 100px;}
ul#css3menu1 img{
border:none;vertical-align:middle;margin-right:10px;}
ul#css3menu1 img.over{
display:none;}
ul#css3menu1 li:hover > a img.def{
display:none;}
ul#css3menu1 li:hover > a img.over{
display:inline;}
ul#css3menu1 span{
display:block;overflow:visible;background-position:right center;background-repeat:no-repeat;padding-right:0px;}
ul#css3menu1 ul li:hover>a{
background-color:#FFFFFF;background-image:none;font:14px Tahoma,sans-serif;color:#868686;text-decoration:none;}
ul#css3menu1 li.topfirst>a{
height:22px;line-height:22px;border-radius:5px 0 0 5px;-moz-border-radius:5px 0 0 5px;-webkit-border-radius:5px;-webkit-border-top-right-radius:0;-webkit-border-bottom-right-radius:0;behavior: url(border-radius.htc)}
ul#css3menu1 li.topfirst:hover>a{
line-height:22px;}
ul#css3menu1 li.topmenu>a{
height:22px;line-height:22px;}
ul#css3menu1 li.topmenu:hover>a{
line-height:22px;}
ul#css3menu1 li.toplast>a{
height:22px;line-height:22px;border-radius:0 5px 5px 0;-moz-border-radius:0 5px 5px 0;-webkit-border-radius:0;-webkit-border-top-right-radius:5px;-webkit-border-bottom-right-radius:5px;behavior: url(border-radius.htc)}
ul#css3menu1 li.toplast:hover>a{
line-height:22px;}
Will K says:

Jan 29, 2011 at 1:02 am

On the issue with IE7 not showing child sub-menu on hover: the reason is because IE7 doesn’t honor li:hover on secondary and tertiary levels without using the Suckerfish! This issue drove me nuts for several days until I figured it out. Use the Suckerfish (or the jQuery equivalent) and it will work – with the added bonus that IE6 will toe the line as well – as long as you code the proper CSS for it.
tütüne son says:

Jan 29, 2011 at 3:53 pm

If I got a chance, i will prefer buying the iphone 4 white but not the iphone 4 Black. Who can tell me where is the Best iPhone Cases I would really want to take one. Best iPhone Cases and Covers, Sale iPhone 4 Cases, iPhone 3g Cases and Accessories
Stew says:

Jan 31, 2011 at 4:38 pm

Outstanding work. Love the cross browser-ness of it! Even if IE does spoil the party a little.
Chuck Rowland says:

Jan 31, 2011 at 9:22 pm

Thanks, great information. I will be back to study some more. The cross browser element is well worth knowing.
R.D. Pullen says:

Feb 6, 2011 at 5:14 pm

I have got your menu working very well But… you do not highlight it is written to work in XHMTL and not HTML. This implies the rest of the site must be written in XHTML, including all the Javascript and thus creates a whole bucket of problems. I cannot recommend it at all. Great for Firefox but not under the market leader! Very sad.
Tomás says:

Feb 11, 2011 at 6:47 pm

Wow, that’s really awesome!
But have you thought of using CSS3 transitions for the menus to appear, the BG colors to change, etc.? That would be triple awesome.
Congratulations, it’s really cool!
Cesar says:

Feb 13, 2011 at 3:01 pm

hi!, im having some problems with the rendering of the nav in ie9! the subtree leves doesn’t show the way it should…it’s just ugly, can someone help me?
stephen willson says:

Feb 15, 2011 at 12:53 pm

A really nice and really helpful tutorial for creating well looking css navigations. I like this tutorial very much and I will create it now for my own. Only for testing this one. Please keep on writing tuts like this one and all the others more! roulette strategy
Web Design Dave says:

Feb 15, 2011 at 6:09 pm

I’m about to get started adding this to one of my new sites! I was doing some IE7 testing, and the 2nd level dropdowns aren’t showing up as expected. It wont matter to me, and i’m only using a single level, but I thought i’d throw it out there. I wasnt able to read through the pages of comments, but i’m assuming i’m not the first person to say this. Your site is amazing. Thanks Nick!
ant_g says:

Feb 25, 2011 at 6:18 am

This is just not working for me, any help please!

Firstly, to get the main menu displaying across the screen I found I had to set a #nav li style with display:inline; (and some padding)
of course then the sub menus display inline, so I had to give them a separate id to set a block display for them.
Finally, when they display, the sub menus appear to take their absolute positon from the parent ul and not the li that they sit in, so they popup all to the very left of the main menu.

What am I getting wrong? I can supply the code I’ve used, but its not live on a website at the moment to show the end results.
Apolo McCloud says:

Feb 26, 2011 at 9:54 pm

hey I would like to download it, would u be good to tell me how??
Krazy Chor says:

Feb 28, 2011 at 2:53 am

chori karvi e gunno 6……………………..
pan e mara mate nahiiiiiiiiiiiiiiii………(Exam ma)…………….:))))
รับทำเว็บไซต์ says:

Feb 28, 2011 at 5:20 am

cool navigation-menus
thanks!You made some good points there.
shameer says:

Mar 3, 2011 at 3:07 am

Thank you for CSS menu tutorial……………..I like it
css splash says:

Mar 4, 2011 at 12:16 am

Looks Good! Css Splash | Web design Inspiration gallery
mark says:

Mar 4, 2011 at 7:49 pm

The menu’s are quite nice. CSS is great and i’m glad it’s used more widely now for menu’s and such. I use flat css menus now but was thinking of trying drop downs. Thanks for the code, i will experiment with it.
J A says:

Mar 8, 2011 at 6:52 am

Nice menu, but it has bug in IE. Nobody out of 241 people noticed?
In IE, the blue selection line only appears when cursor is ABOVE text, but if it is on the same line but outside the text it won’t appear. However if the item has sub-menu, then sub-menu will appear – so it looks kind of strange without the blue selection line.
The solution is to change inline type to inline-block.
Good luck.
J A says:

Mar 8, 2011 at 6:56 am

And one more bug css-gradient-dropdown has broken sub-menus in IE7 and it is not rouned in IE7 either. Not really cool…
Andrus says:

Mar 9, 2011 at 11:15 am

I tried this menu in iPhone emulator. Root level contains 6 items.
There are 3 items in first row and remaining 3 items are wrapped to next row. Wrapped items lose background and look ugly.

It is not possible to select any item from aubmenu: trying to select item from submenu activates wrapped root menu item instead which is rendered above submenu in same place. Same issue also occurs if browser window width is small.

How to create menu which is usable from iPhone also ?
Mike says:

Mar 9, 2011 at 5:12 pm

Gradients don’t work in Opera. You should fall back to images for browsers that don’t support gradients.
Andrus says:

Mar 11, 2011 at 2:22 pm

In iPhone menu items in horizontal menu which have submenus are not working. Only menu items without submenus are working.

In the iPhone emulator https://code.google.com/archive/p/ibbdemo2 all menus are working. How to create dropdown menu which works in real iPhone also ?
How To Get Taller | How To Put On A Condom says:

Mar 17, 2011 at 5:16 pm

This article CSS3 Dropdown Menu is perfection. Thanks.
How To Put On A Condom | How To Get Taller says:

Mar 17, 2011 at 5:18 pm

A great instructional piece to learn plus a demo!!! An amazing way to learn indeed!
Bennett says:

Mar 18, 2011 at 10:24 am

A great menu. But I am having an issue for for over a week now, so had to remove it for now. As one hover over a link and the drop down opens/expand, it is visible over the breadcrumb but lies beneath all three columns of the pages. I have an OSC store. Even posted to forum for some tips, but nothing has worked. So am looking for a tip on why it behaves this way.
1. Jerry says:
  
  Apr 11, 2011 at 7:51 am
  
  You need to set the z-index of the menu so that it paints on top of the columns in your website.
dexx says:

Apr 17, 2011 at 2:54 pm

age of heart attack decreased with each passing day, he said.
JWRIV says:

May 1, 2011 at 7:31 am

Very nice menu indeed. I have been slow to adopt CSS3 techniques myself due to browser support, however, the browser manufacturers will never catch up if the designers don’t start using them, with graceful degradation in mind of course.
Najim says:

May 2, 2011 at 5:29 am

For the drop down li’s to be activated by hovering anywhere on it rather than only the text in Internet explorer the Doc type has to be declared as

and not

So take care of it while implementing it in ie. Another thing I am still not able to solve is my #menu ul ul box does not appear in ie, only the portion that is overlapping the #menu ul in its right is appearing ! I think I am missing something !
Najim says:

May 2, 2011 at 5:31 am

I the above post my codes got deleted :( What got deleted is that the doc type should be xhtml and not html …. If that makes sense..
Azizul islam says:

May 3, 2011 at 8:40 am

hurrah!!! i got the dropdown menu code for me which was searching for long time.
it will help me a lot to charm my site. thanks for this code.

note: this code is more easy to use because of CSS3 and no need javascript.
Niyas Khan says:

May 4, 2011 at 4:58 am

Really helpful tutorial for creating nice dd menu…tnx
Salvatore says:

May 9, 2011 at 8:36 am

Thank you for this code.
How about using javascript for hiding menu on a click event ?

regards
1. Nick says:
  
  May 11, 2011 at 4:06 pm
  
  This tutorial does NOT work. I did it for a website I was working on. And nothing….. I mean nothing happened. It didn’t look anything like that. Please fix the tutorial thank you.
  1. miyijura says:
    
    Jun 8, 2011 at 8:23 pm
    
    You are a dumb.
    Everything works fine by the way.
  2. Andres Vaquero says:
    
    Jun 10, 2011 at 3:54 am
    
    Does not work in IE6 because IE6 doesn’t have hover functionality. There is a hack however to fix it. You can use our best friend in these situations, Google, to find out how. Anyhow say goodbye to IE6 unless it is going to make you lots of money, which is unlikely, it’s obsolete.
M-ZEE says:

May 12, 2011 at 11:43 pm

Im having a bit of trouble getting the dropdown menu to show. I belive its a Z order problem but I do not have a full understanding of the css and z order.

Maybe you can help me out…
I have a PHP page and the dropdown menu is behind the header
1. Christian says:
  
  Jun 8, 2011 at 1:07 am
  
  add z-index to the property below and set value to 999
  
  #nav li {
  margin: 0 5px;
  padding: 0 0 8px;
  float: right;
  position: relative;
  top:6.35em;
  list-style: none;
  z-index:999
  }
joyoplencing says:

May 15, 2011 at 11:57 pm

Really helpful tutorial for creating nice dd menu…tnx…blogger jogja..
Mike says:

May 16, 2011 at 9:02 am

As you may know, the newest versions of Opera support CSS3 gradients. Also, there are a few things that should have rounded corners but don’t. Opera supports border-radius, however you are using the pseudo property (or whatever it’s called) with the -moz- prefix while not using the actual CSS3 property. I’ve taken the liberty of updating the CSS to be Opera compatible:

body {
font: normal .8em/1.5em Arial, Helvetica, sans-serif;
background: #ebebeb;
width: 900px;
margin: 100px auto;
color: #666;
}
a {
color: #333;
}
#nav {
margin: 0;
padding: 7px 6px 0;
line-height: 100%;
border-radius: 2em;

-webkit-border-radius: 2em;
-moz-border-radius: 2em;

-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);

background: #8b8b8b; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#a9a9a9′, endColorstr=’#7a7a7a’); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#a9a9a9), to(#7a7a7a)); /* for webkit browsers */
background: -moz-linear-gradient(top, #a9a9a9, #7a7a7a); /* for firefox 3.6+ */
background-image: -o-linear-gradient(#a9a9a9,#7a7a7a); /* for Opera 11.10+ */

border: solid 1px #6d6d6d;
}
#nav li {
margin: 0 5px;
padding: 0 0 8px;
float: left;
position: relative;
list-style: none;
}
/* main level link */
#nav a {
font-weight: bold;
color: #e7e5e5;
text-decoration: none;
display: block;
padding: 8px 20px;
margin: 0;
-webkit-border-radius: 1.6em;
-moz-border-radius: 1.6em;
border-radius: 1.6em;
text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
}
/* main level link hover */
#nav .current a, #nav li:hover > a {
background: #d1d1d1; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#ebebeb’, endColorstr=’#a1a1a1′); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#a1a1a1)); /* for webkit browsers */
background: -moz-linear-gradient(top, #ebebeb, #a1a1a1); /* for firefox 3.6+ */
background-image: -o-linear-gradient(#ebebeb,#a1a1a1); /* for Opera 11.10+ */

color: #444;
border-top: solid 1px #f8f8f8;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
}
/* sub levels link hover */
#nav ul li:hover a, #nav li:hover li a {
background: none;
border: none;
color: #666;
-webkit-box-shadow: none;
-moz-box-shadow: none;
}
#nav ul a:hover {
background: #0399d4 !important; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#04acec’, endColorstr=’#0186ba’); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba)) !important; /* for webkit browsers */
background: -moz-linear-gradient(top, #04acec, #0186ba) !important; /* for firefox 3.6+ */
background-image: -o-linear-gradient(#04acec,#0186ba); /* for Opera 11.10+ */

color: #fff !important;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
text-shadow: 0 1px 1px rgba(0, 0, 0, .1);
}
/* level 2 list */
#nav ul {
background: #ddd; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#ffffff’, endColorstr=’#cfcfcf’); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#cfcfcf)); /* for webkit browsers */
background: -moz-linear-gradient(top, #fff, #cfcfcf); /* for firefox 3.6+ */
background-image: -o-linear-gradient(#fff,#cfcfcf); /* for Opera 11.10+ */

display: none;
margin: 0;
padding: 0;
width: 185px;
position: absolute;
top: 35px;
left: 0;
border: solid 1px #b4b4b4;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}
/* dropdown */
#nav li:hover > ul {
display: block;
}
#nav ul li {
float: none;
margin: 0;
padding: 0;
}
#nav ul a {
font-weight: normal;
text-shadow: 0 1px 1px rgba(255, 255, 255, .9);
}
/* level 3+ list */
#nav ul ul {
left: 181px;
top: -3px;
}
/* rounded corners for first and last child */
#nav ul li:first-child > a {
-webkit-border-top-left-radius: 9px;
-moz-border-radius-topleft: 9px;
-webkit-border-top-right-radius: 9px;
-moz-border-radius-topright: 9px;
border-top-left-radius: 9px;
border-top-right-radius: 9px;
}
#nav ul li:last-child > a {
-webkit-border-bottom-left-radius: 9px;
-moz-border-radius-bottomleft: 9px;
-webkit-border-bottom-right-radius: 9px;
-moz-border-radius-bottomright: 9px;
border-bottom-left-radius: 9px;
border-bottom-right-radius: 9px;
}
/* clearfix */
#nav:after {
content: “.”;
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#nav {
display: inline-block;
}
html[xmlns] #nav {
display: block;
}
* html #nav {
height: 1%;
}
1. Casino says:
  
  May 26, 2011 at 11:42 pm
  
  This really is one of the best intros on the subject I have ever read. I have been doing a lot of research and have read through hundreds of posts. I will definitely have to keep coming back for more great info
Mike says:

May 16, 2011 at 9:25 am

I just realized you missed a couple of box-shadow properties for the following too:

#nav {
box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
#nav ul li:hover a, #nav li:hover li a {
box-shadow: none;
}

Here’s the updated CSS for non-Mozilla/webkit/IE browsers:

body {
font: normal .8em/1.5em Arial, Helvetica, sans-serif;
background: #ebebeb;
width: 900px;
margin: 100px auto;
color: #666;
}
a {
color: #333;
}
#nav {
margin: 0;
padding: 7px 6px 0;
line-height: 100%;
border-radius: 2em;

-webkit-border-radius: 2em;
-moz-border-radius: 2em;

-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
box-shadow: 0 1px 3px rgba(0, 0, 0, .4);

background: #8b8b8b; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#a9a9a9′, endColorstr=’#7a7a7a’); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#a9a9a9), to(#7a7a7a)); /* for webkit browsers */
background: -moz-linear-gradient(top, #a9a9a9, #7a7a7a); /* for firefox 3.6+ */
background-image: -o-linear-gradient(#a9a9a9,#7a7a7a); /* for Opera 11.10+ */

border: solid 1px #6d6d6d;
}
#nav li {
margin: 0 5px;
padding: 0 0 8px;
float: left;
position: relative;
list-style: none;
}
/* main level link */
#nav a {
font-weight: bold;
color: #e7e5e5;
text-decoration: none;
display: block;
padding: 8px 20px;
margin: 0;
-webkit-border-radius: 1.6em;
-moz-border-radius: 1.6em;
border-radius: 1.6em;
text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
}
/* main level link hover */
#nav .current a, #nav li:hover > a {
background: #d1d1d1; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#ebebeb’, endColorstr=’#a1a1a1′); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#a1a1a1)); /* for webkit browsers */
background: -moz-linear-gradient(top, #ebebeb, #a1a1a1); /* for firefox 3.6+ */
background-image: -o-linear-gradient(#ebebeb,#a1a1a1); /* for Opera 11.10+ */

color: #444;
border-top: solid 1px #f8f8f8;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
}
/* sub levels link hover */
#nav ul li:hover a, #nav li:hover li a {
background: none;
border: none;
color: #666;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
#nav ul a:hover {
background: #0399d4 !important; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#04acec’, endColorstr=’#0186ba’); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba)) !important; /* for webkit browsers */
background: -moz-linear-gradient(top, #04acec, #0186ba) !important; /* for firefox 3.6+ */
background-image: -o-linear-gradient(#04acec,#0186ba); /* for Opera 11.10+ */

color: #fff !important;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
text-shadow: 0 1px 1px rgba(0, 0, 0, .1);
}
/* level 2 list */
#nav ul {
background: #ddd; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#ffffff’, endColorstr=’#cfcfcf’); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#cfcfcf)); /* for webkit browsers */
background: -moz-linear-gradient(top, #fff, #cfcfcf); /* for firefox 3.6+ */
background-image: -o-linear-gradient(#fff,#cfcfcf); /* for Opera 11.10+ */

display: none;
margin: 0;
padding: 0;
width: 185px;
position: absolute;
top: 35px;
left: 0;
border: solid 1px #b4b4b4;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}
/* dropdown */
#nav li:hover > ul {
display: block;
}
#nav ul li {
float: none;
margin: 0;
padding: 0;
}
#nav ul a {
font-weight: normal;
text-shadow: 0 1px 1px rgba(255, 255, 255, .9);
}
/* level 3+ list */
#nav ul ul {
left: 181px;
top: -3px;
}
/* rounded corners for first and last child */
#nav ul li:first-child > a {
-webkit-border-top-left-radius: 9px;
-moz-border-radius-topleft: 9px;
-webkit-border-top-right-radius: 9px;
-moz-border-radius-topright: 9px;
border-top-left-radius: 9px;
border-top-right-radius: 9px;
}
#nav ul li:last-child > a {
-webkit-border-bottom-left-radius: 9px;
-moz-border-radius-bottomleft: 9px;
-webkit-border-bottom-right-radius: 9px;
-moz-border-radius-bottomright: 9px;
border-bottom-left-radius: 9px;
border-bottom-right-radius: 9px;
}
/* clearfix */
#nav:after {
content: “.”;
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#nav {
display: inline-block;
}
html[xmlns] #nav {
display: block;
}
* html #nav {
height: 1%;
}
Digitalvaldosta says:

May 26, 2011 at 1:22 pm

I ran into a problem with this menu “hiding” behind a jquery slider when viewing in any version of IE. The fix that I found was to add a z-index of 1000 to all of the position: relative properties. This only was required for #nav li.

Happy Coding
Dan says:

May 31, 2011 at 7:04 pm

Completely useless without the code for the body. Can’t figure out what is labeled , , etc… in the body
Christian says:

Jun 8, 2011 at 1:30 am

Thanks for this gorgeous nav. Having a problem with sub list items. The text is smushing together when it is more then one word. how can I fix this problem. The site I am working on is:

Thanks for the help!
Julian says:

Jun 11, 2011 at 12:32 pm

Man, why don´t you share the download link? Now we all must search in the demo for the code..
Carlos says:

Jun 11, 2011 at 6:16 pm

Hi, this is awesome, but, i’m using it here http://www.superelectricos.com and it works on FF and chrome BUT on any IE doesn’t work at all, need help please! Thanks!
Josh says:

Jun 15, 2011 at 11:08 am

Love this drop down menu. Additional problem in IE (I was using 7), the highlight doesn’t cover the whole menu item. It only appears when the mouse is over the text.
Lau says:

Jun 16, 2011 at 12:17 am

Simply great this menu looks very very nice, I tried to use on my personal blog, but in IE 7 and mozilla 3.5 looks very ugly, I hope everyone update their browsers and we can use css3 as css2.
joran says:

Jun 18, 2011 at 10:38 am

hey nice site is it ok if i use this for my site?
meds says:

Jun 24, 2011 at 10:25 am

Very nice button, like made with Photoshop. Thanks for tutorial
(aleb says:

Jun 26, 2011 at 10:18 pm

Very attractive menu. I know I’m a little late in posting my comment by say, a year+, but it’s still very attractive. The question I would ask now is that after one and a half years, what else could you do to this same menu to improve it even more. I would be interested in seeing you ‘modify’ to the times and expand its creativity.
Thanks,
(aleb
waqar khan says:

Jun 30, 2011 at 2:12 am

i want to creat multi-column sub menu with images have you someone any idea on that
1. Haris says:
  
  Jun 30, 2011 at 8:45 am
  
  simply put the images behind the submenu lists and create a new css for images.
araz says:

Jun 30, 2011 at 7:46 pm

hi,

please help me.
how rename or add (dropdown menu) to style file.

Difference : “.sf-menu AND #cat-nav- ”

default file:

.sf-menu li:hover ul, .sf-menu li.sfHover ul { top: 2.5em; z-index: 400; }
ul.sf-menu li:hover li ul, ul.sf-menu li.sfHover li ul { top: -999em; z-index: 400; }
ul.sf-menu li li:hover ul, ul.sf-menu li li.sfHover ul { top: 0; }
ul.sf-menu li li:hover li ul, ul.sf-menu li li.sfHover li ul { top: -999em; }
ul.sf-menu li li li:hover ul, ul.sf-menu li li li.sfHover ul { top: 0; }

.sf-menu { position: relative; margin: 0; padding: 0; list-style: none;clear:both; float: left; margin-top: 12px; padding-left: 9px; margin-bottom: 1em; background: url(‘images/menu_bg.png’) no-repeat; height: 58px; width: 957px; z-index: 400; }
.sf-menu ul { position: absolute; top: -999em; margin-top: 20px; width: 212px; right: 7px; -moz-box-shadow: 3px 6px 8px 1px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 3px 6px 8px 1px rgba(0, 0, 0, 0.3); background-image: url(‘images/dropdown_top.png’); background-repeat: no-repeat; background-position: top; padding-top: 8px; z-index: 400; }
.sf-menu a { display: block; position: relative; text-decoration:none; color: #fff; padding: 23px 20px 0px 20px; height: 30px; text-decoration: none; text-shadow: 1px 1px 1px #000; font-weight: normal; float :right; }
.sf-menu li { float: right; position: relative; font-family: Tahoma; background: url(‘images/menu_line.png’) no-repeat; background-position: left 5px; }
.sf-menu li ul li ul { right: 212px; margin-top: 0px;}
.sf-menu li li { background: #ebebeb url(‘images/submenu_li.gif’) no-repeat; background-position: 24px 15px; height: 36px ; margin: 0px; float: right; width: 212px; z-index: 10; }
.sf-menu li a:hover { color: #00b4ff; }
.sf-menu li:hover, .sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active { background: #121212; outline: 0; }
.sf-menu > li.sfHover.sf-ul { background: transparent url(‘images/parent_link_left.png’) no-repeat; background-position: 7px 11px; z-index: 200; }
.sf-menu li.sfHover li a:hover, .sf-menu li ul li.sfHover a, .sf-menu li ul li ul li.sfHover a { background: #f7f7f7 url(‘images/submenu_li_hover.gif’) no-repeat; background-position: 11px 0px; }
.sf-menu li.sfHover li a, .sf-menu li.sfHover li ul li a, .sf-menu li.sfHover li ul li ul li a { background: url(‘images/submenu_li_hover.gif’) no-repeat ; background-position: -100px -100px; width: 172px; color: #404040; margin: 0px; padding: 14px 0px 0px 40px; text-shadow: 0px 1px 0px #cccccc; }
.sf-menu > li.sfHover.sf-ul > a { color: #000; text-shadow: 1px 1px 1px #fff; background: transparent url(‘images/parent_link_right.png’) no-repeat; background-position: right 11px; z-index: 301; }
ul.sf-menu li.backLava { position: absolute; z-index: 3; background: url(‘images/lavalamp.png’) no-repeat; background-position: center 0px; padding: 0; height: 16px; margin-top: 42px; }
——————–

new code (DROPDOWN MENU):
—————-
#cat-nav { bottom:-14px; left:0; position:absolute; width:980px; z-index:100; }
#cat-nav-left {background: url(images/n-2/cat-nav-left.png) no-repeat; width: 10px; height: 64px; float: left;}
#cat-nav-content { background: url(images/n-2/cat-nav-content.png) repeat-x; float: left; height: 64px; width: 941px; }
.nav li ul {box-shadow: 3px 6px 7px 1px rgba(0, 0, 0, 0.5); -moz-box-shadow:3px 6px 7px 1px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 3px 6px 7px 1px rgba(0, 0, 0, 0.5); background: url(images/n-2/cat_menu_bg.png) repeat-y; border: 1px solid #111010; -moz-border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius-topright: 0px; -webkit-border-top-left-radius: 0px; border-top: none; padding-bottom: 15px; }
#cat-nav-content ul.nav { float: right; margin-top: 10px; margin-left:18px; }

#cat-nav-content ul.nav li { padding:0 17px 0 0; }
#cat-nav-content ul.nav li a { padding: 8px 4px 21px; }

#cat-nav-content ul.nav li.sf-ul a { padding: 8px 6px 21px 15px; }

#cat-nav-content ul.nav > li.sf-ul { background: url(images/n-2/li-hover.png) no-repeat 55px right; }
#cat-nav-content ul.nav > li.sf-ul > a { background: url(images/n-2/a-hover.png) no-repeat 55px left; }

#cat-nav-content ul.nav > li.sf-ul.sfHover { background: url(images/n-2/li-hover.png) no-repeat top right; }
#cat-nav-content ul.nav > li.sf-ul.sfHover > a { background: url(images/n-2/a-hover.png) no-repeat top left; display: block; }

#cat-nav-content ul.nav li li { padding: 0px; }
#cat-nav-content ul.nav ul ul { border-top: 1px solid #111010; -moz-border-radius-topleft: 8px; -webkit-border-top-left-radius: 8px; }
#cat-nav-content ul.nav li li a:hover { color: #00b7f3; }
#cat-nav-content ul.nav li a {color: #fefefe; font-weight: bold; text-decoration: none; text-shadow: -1px -1px 1px #0a0a0a; text-align:right; }
#cat-nav-content ul.nav ul li a { text-shadow: 1px 1px 1px #0a0a0a; }
#cat-nav-content ul.nav > li > a:hover { }
#cat-nav-content ul.nav li li {background: url(images/n-2/bullet.png) no-repeat 16px 21px; float:right; }
#page-menu ul.nav li li { background:url(“images/n-2/page-menu-bullet.png”) no-repeat scroll 16px 16px transparent; }
#page-menu ul.nav li a { padding: 8px 9px 16px; }
#page-menu ul.nav > li > a.sf-with-ul:hover, #page-menu ul.nav > li.sfHover > a { background-color: #232323; }
#page-menu ul.nav li li a { text-shadow: none; }

#page-menu .nav li:hover ul, #page-menu ul.nav li.sfHover ul { left:0px; top:45px; }
#page-menu .nav ul li:hover ul, #page-menu ul.nav ul li.sfHover ul { left:191px; top:-2px; }

#cat-nav-content ul.nav li li a, #page-menu ul.nav li li a {background: url(images/n-2/n-2/divider.png) no-repeat bottom left; display: block; width: 156px; padding: 9px 5px 11px 28px !important; }
#page-menu ul.nav li li a { background: none; padding: 0px 5px 0px 28px !important; }

#cat-nav-right { background: url(images/n-2/n-2/cat-nav-right.png) no-repeat; width: 19px; height: 64px; float: left;}
#cat-nav #search-form { float: left; width: 131px; background: url(images/n-2/n-2/search.png) no-repeat; height: 27px; margin-top: 15px;}
#cat-nav #searchinput { background: none; border: none; font-style: none; color: #646464; padding-left: 12px; display: block; margin-top: 3px; float: left; width: 95px; }
#cat-nav #searchsubmit { float:left; margin-top:7px; }

#cat-nav #search-form img {float: right; margin-top: -24px; padding-right:10px;}

#page-menu ul.nav ul { z-index: 10000; padding-bottom: 9px; background: #232323; border: 0px; padding-top: 2px; }
#page-menu ul.nav ul ul { -moz-border-radius-topleft: 8px; -webkit-border-top-left-radius: 8px; }
————

Tanks
طراحی سایت says:

Jul 8, 2011 at 6:18 am

Thank you for writing this article. I really enjoyed it. Keep up the excellent work!
Seo Mauritius says:

Jul 10, 2011 at 3:28 am

Great menu and great tutorial totally awesome but browser compatibility with css3 still suck particularly in IE hope it will be fix
ankitesh says:

Jul 14, 2011 at 3:18 pm

pls can you mail me this menu?? i mean the HTML and the other files?? please please

or else give me a download link…
Marius Swanepoel says:

Jul 22, 2011 at 12:44 pm

Hi, Nice stuff. I tried it on IE9 and had to insert some CSS to get rounded corners. I now notice strange behavior on the drop-down menu “lines appearing” even on your demo. Any idea how to solve this?
1. Marius Swanepoel says:
  
  Jul 22, 2011 at 2:04 pm
  
  I found the issue, it seems like the one “hover” style has some shadow CSS styling that causes the lines underneath all the drop-down options. I removed this for now and everything works again!
Julian says:

Aug 16, 2011 at 3:29 pm

Hi,

can you make it fade in with jquery? That would be amazing. Please mal back!

Thanks,

Julian
RD Web Design says:

Aug 24, 2011 at 1:32 pm

This menu is lush, very apple website like but better, thanks.
l says:

Sep 5, 2011 at 2:50 am

Hi,
Nice job. Ie9 does not like gradients and border-radius.
Atif Aslam says:

Sep 7, 2011 at 3:57 am

Love this drop down menu.

I will definitely use it on my website.
jingxiamnh says:

Sep 8, 2011 at 4:00 am

Youre so right. Im there with you. Your weblog is definitely worth a read if anyone comes throughout it. Im lucky I did because now Ive received a whole new view of this. I didnt realise that this issue was so important and so universal. You absolutely put it in perspective for me.
Nick says:

Sep 11, 2011 at 11:59 pm

Fantastic code. Exactly what I needed.

I had one problem with IE 8 – the [ #nav .current a, #menu li:hover > a ] inherits down to the li tags and causes a bad display.

Adding “filter:;” to [ #menu ul li:hover a, #menu li:hover li a ] fixes it.

#menu ul li:hover a, #menu li:hover li a {
John says:

Sep 12, 2011 at 3:32 pm

Great explanation! Not a lot of words, but the image of the CSS code is very ilustrative –> “an image said a thousand words” and the horizontal menu is awesome. So, Thanks!
Roelof Wobben says:

Sep 18, 2011 at 11:08 am

Can you help me find this file img/gradient.png.
Then finally I can try to make this menu work for my new website.
Chad says:

Sep 20, 2011 at 1:09 pm

I love the look and functionality of this menu. Very well done! However, I’m having problems with the level 2 dropdown displaying in IE 8. I’ve read all comments on this thread and see that others are having the same problem. Has anyone found a solution?

I’ve tried playing around with z-indexes, and have even replaced some html 5 elements with divs but no success.

I would appreciate any help you might be able to provide! Thank you!
Emrah says:

Sep 23, 2011 at 8:49 am

İ want to use this menu. How can i take th code and gif pictures?
Luke says:

Sep 26, 2011 at 7:15 am

Really nice example, thanks for the use! One question, when I click on say ‘Contact’ how do I make the ’rounded-selection-button’ park on this page and not stay on the ‘Home’ selection?

(I’m sure I’ll wake up in the morning and figure it out eventually…)
1. Luke says:
  
  Sep 26, 2011 at 7:26 am
  
  …never mind, got it ;)
  
  read the code, its all in front of you!
Lucas says:

Sep 27, 2011 at 10:11 pm

Hey, how I fix it on IE 6,7,8,9 don’t know what versions are with bugs
Paulo H.L says:

Sep 30, 2011 at 12:31 pm

Realmente uma otima maneira, quem sabe uma das melhores para a construção de menus interativos, fiz alguns modelos ultilizando JS para transferir as classes pois tambem encontrei erros com :HOVER como ja foi dito.
FloFi says:

Oct 11, 2011 at 9:22 pm

Does anyone know how I can change the .current class dynamically that it fit’s to >>current<< the page?
1. FloFi says:
  
  Oct 11, 2011 at 9:56 pm
  
  just got it.
  I used id’s for the tags which could be in a current state. And for the same tag I used to get an unique combination of id and class: “#li_id_xyz.page-id-xx” which I could use in my stylesheet. :)
Majid H says:

Oct 12, 2011 at 3:21 am

This is great tutorial man. I was feeling difficulties regarding this type of nav bar menus but thank to you. I will share this with my blog readers also at Blogger Tricks.
minyatoor says:

Oct 15, 2011 at 10:32 am

half of a well designed website is for the way that menu navigation looks like, thanks
Ingwie says:

Oct 18, 2011 at 5:01 pm

Great thing! I used FF to read the source code and was like: O.O!
For playing with it, i copied the SRC using FF…very nice menu you did there. Oh and where is the NotepadDesign? o.o
Sahidul Hoque says:

Oct 19, 2011 at 1:28 am

Hi,
Very good CSS menu. However there is a bug. When I click on a menu item I go to another page. When I comeback with browser back button I see the menu item is still open. I could not fix this bug, do you have any idea how to solve it?

Sahidul
1. γραμματεας ονλινε says:
  
  Feb 17, 2012 at 8:28 am
  
  nice post and a wonderful blog! love this theme!
Bohemier says:

Oct 20, 2011 at 1:23 pm

Great tutorial, thanks.
TIP: You can use SVG gradients to properly support rounded borders and IE…
Web Designer - Ray Creations says:

Nov 6, 2011 at 6:17 am

We too use CSS to design drop down menus, rather than use Javascript. Haven’t tried this menu, however, it looks great.
shivam shukla says:

Nov 11, 2011 at 9:43 pm

Just for testing purpose… for example do we make two drop down menu in such a way that when user clicks on any of these they expand to show the further content. Clicking one shall not minimize the other ?
Rajesh Jangra says:

Nov 12, 2011 at 9:25 am

It is great, awsome. Try everybody who trying to generate a dinamic menu for your own site. It is very very simple to do.
Thanks very much……………….
karthimx says:

Nov 15, 2011 at 3:36 pm

Very nice drop down menu with pure css.
fotovoltaika says:

Nov 28, 2011 at 8:00 am

I love your design and the menu of course is great!
Selma says:

Nov 29, 2011 at 7:51 am

I really appreciate you sharing this, you made it really easy to understand!

Here’s a quote for you

If you can’t explain it simply, you don’t understand it well enough.
Albert Einstein

You clearly understood it! :)
Neo says:

Nov 29, 2011 at 3:07 pm

Great menu. I don’t see a link for downloading the source code?? Could you let me know where I can download it from?
1. rey says:
  
  Dec 7, 2011 at 6:41 am
  
  click on the ‘VIEW DEMO’ button above, right-click on the resulting page, select ‘View source’ or words to that effect (depending on the browser you use).
  1. rey says:
    
    Dec 7, 2011 at 6:46 am
    
    … then click (or right-click) on the ‘style.css’ link.
Alexis says:

Dec 6, 2011 at 9:38 am

Not found in ipad.

:-/ any ideas?

tranks
Retina says:

Dec 8, 2011 at 2:39 am

this tutorial seems to be great and this CSS3 dropdown menu is really beautiful but i am just starting upmyself to update myself with html5 and CSS3 and having lots of confusions specially how i could use HTML5 and CSS3 with html 4 and CSS2. Can you please write on this topic?

and yeah thanks alot for this dropdown menu.. i will try to use it quite soon.
Javi says:

Dec 18, 2011 at 3:59 pm

Doesnt run in my code the dropdown, whats happening?

thanks in advance
david says:

Dec 18, 2011 at 10:57 pm

css3 is more and more useful . hope ie series can support it like ff and chrome do one day.
Marc says:

Dec 24, 2011 at 1:52 pm

Beautiful and elegant script. The only two thing I don’t like about it is that it uses some absolute positioning which makes this script unusable for fluid content and resizable designs

Thanks for the great script!
pezhman says:

Dec 27, 2011 at 4:36 pm

how can i chane it to rtl direction for persian language?
ali says:

Dec 28, 2011 at 1:35 am

hi thank very well, but how change menu to show sub menu right to left for arabic language
1. Lycan says:
  
  Jan 1, 2012 at 4:28 am
  
  just do this….
  #nav li {
  margin: 0 5px;
  padding: 0 0 8px;
  float: right;
  position: relative;
  list-style: none;
  }
LibertyBloggers says:

Jan 1, 2012 at 10:40 am

Thanx a lot buddy, U saved my life.
Kevin says:

Jan 5, 2012 at 5:37 pm

Great going!!!

Is it possible to add icons/graphics to an item? For example, it would be nice to have an arrow showing that a dropdown has more items to it (otherwise you may not know to look there).

Thanks in advance, and keep up the great work!
Suraj says:

Jan 7, 2012 at 11:51 am

When we click on the (as a example) ” About”. Is it appear like ” Home” (active) with styles?
Tuomas says:

Jan 12, 2012 at 12:43 pm

Hi. Thank you for the dropdown script :) i have little problem.. When i use Google Chrome browser dropdown menu goes behind the flashobject and does not appear
Sean says:

Jan 12, 2012 at 1:55 pm

I’m not sure if there was a method to your madness, but I was playing around with your main scrip (the one with the gradient image) and was able to make this menu look good in IE also by doing the following:

If you add “border-radius: 1.6em;” to the “#nav a” definition and I also changed the rounded corners for the first and last link to include the standard border-xx-xx-radius tag:

/* rounded corners of first and last link */
#nav ul li:first-child > a {
border-top-left-radius: 9px;
-webkit-border-top-left-radius: 9px;
-moz-border-radius-topleft: 9px;

border-top-right-radius: 9px;
-webkit-border-top-right-radius: 9px;
-moz-border-radius-topright: 9px;
}
#nav ul li:last-child > a {
border-bottom-left-radius: 9px;
-webkit-border-bottom-left-radius: 9px;
-moz-border-radius-bottomleft: 9px;

border-bottom-right-radius: 9px;
-webkit-border-bottom-right-radius: 9px;
-moz-border-radius-bottomright: 9px;
}

That made IE look like the current FF version with rounded corners for the main menu and the rounded corners on the highlights of the fly-outs.

I’ll try the second demo type next :)

Comments?
1. Sean says:
  
  Jan 12, 2012 at 2:16 pm
  
  A few more tweaks to make it exact:
  Added ” box-shadow: 0 1px 3px rgba(0,0,0, .4);” to the main “#nav” definition
  Added “box-shadow: none;” to the “#nav ul li:hover a, #nav li:hover li a” definition
  Added “border-radius: 0;” to the “#nav ul a:hover” definition
  
  Sorry for the double post…
2. Sean says:
  
  Jan 12, 2012 at 3:36 pm
  
  Next time I’ll read all of the posts before making suggestions… I found the same exact ones on earlier posts… carry on!
van moves says:

Jan 14, 2012 at 2:15 pm

great menu and but it does not work with older browsers
Ammar @ Free Premium Themes says:

Jan 18, 2012 at 3:54 am

Thanks for sharing this menu. But where is CSS and HTMl code?
karthimx says:

Jan 21, 2012 at 1:12 pm

Nice tutorial for drop down menu, used on my site. works great.
Ganesh kumar g says:

Jan 30, 2012 at 11:00 pm

Where is the html and css code ? that image ? need to write, right ? :-) lazy …:-)
1. Matt says:
  
  Feb 6, 2012 at 5:21 pm
  
  Ganesh K. – The lazy one is the one who can’t figure out how to get the css, html and the image!
  
  This code also works perfectly on iOS/Safari making it iPhone/Ipod friendly. Thanks!
Bryan says:

Feb 9, 2012 at 11:54 pm

I love the menu… Just curious If you had any tips on how to center the main links in a dynamic width of the #nav ul …. I have tried several combo but am confused how to get this setup centered correctly.
xhtmlpress says:

Feb 10, 2012 at 11:36 am

Css3 is just like a revolution in the field of web designing but is a bit hard to learn. Thanks for sharing such a great tutorial , i was trying to make such menu for a long time but i was unable to find the best place where i can learn this. Thanks
goyang pattah pattah says:

Feb 11, 2012 at 3:23 am

mantap bener postinganya bang, ijin nyimak dulu, ahahhahayyy
Blogger Templates says:

Feb 13, 2012 at 12:36 pm

Really helpful. I was looking for a solution to design pure CSS based navigation menu.
Nano says:

Feb 14, 2012 at 9:04 am

Thanks! I have a problem with the navigation in IE 8.
Manish Gupta says:

Feb 21, 2012 at 10:05 am

Thank you !!! Very nice work , you save my lots of time..
mark says:

Mar 7, 2012 at 5:13 pm

Which part of the CSS gives the space between the button and drop down. My menu always disappears everytime I drop to click on a link in the drop down?
1. kashif says:
  
  May 6, 2012 at 1:34 am
  
  in #nav ul
  
  top: 35px;
  
  gives the space.
Tadej says:

Mar 15, 2012 at 3:42 am

Hi

Im having the same problem than (Christian Jun 08, 2011 @ 01:30)
The text is smushing together when it is more then one word. how can I fix this problem.
in #nav ul is width set to 185 px, but width of li’s should be auto, accourding to text width.
#nav ul {
width: 185px;
}
John says:

Mar 15, 2012 at 5:11 am

HI, are there any ways to use jquery/JS to change to selected tab?
I tried using
$(“#nav li a”).click(function()
{
$(this).parent().addClass(‘current’);
});
but it didn’t work! I got no idea what is going wrong.
MacDemo says:

Apr 9, 2012 at 11:52 am

Instead of using display:none to hide the dropdown I prefer doing; left:-9999px; And then to bring it back; left:0; Only works if you use relative and absolute positioning in the right way.
But I believe my method is more accessible since screen readers for example won’t read display none.
What’s your idea about this ?
Jamis Henrique says:

Apr 13, 2012 at 6:29 pm

Olá,

Na hora que adicionei o menu no site, o drop-down ficou abaixo dos outros elementos já existentes e o seu background também ficou apenas no começo da box dele(s). Poderia me ajudar a solucionar?
present shop says:

Apr 17, 2012 at 11:49 am

nice solution with the gradient effect by shifting the background image
thanks
Cuong says:

Apr 25, 2012 at 1:56 am

i got a problem when deploying the menu in my website
whet the drop down appear, it was covered by div tag below it
how can i make the drop down appear on top of other component?
1. Cuong says:
  
  Apr 25, 2012 at 2:32 am
  
  problem solved, i used z-index property to make drop down menu on top of div elemnt
denish patel says:

Apr 27, 2012 at 10:46 am

hey thanks for amazing navbar but i have only one problem when i put slider under your navbar and take mouse over navbar then its drop-down hidden behind slider and i can nor see drop-down menus .
Ricardo says:

May 5, 2012 at 7:30 pm

I would like to test, but I did not find the source to donwnload. Is there a source ?
viom jeet says:

May 8, 2012 at 6:28 am

Border-radius is not working on IE.. on Win7

What to do..
aris says:

May 14, 2012 at 6:50 am

made after its drop down menu, how to install the blog, please help
wordperfect says:

May 29, 2012 at 4:36 am

Thanks for this tut, I was building my own, slightly more complex menu and ran into problems and after reading your blog I saw my error, thanks again.
Just a quick comment to those who may be having problems.
1/ it DOES work in all modern browsers in its raw form I tested it.
2/ it DOES work in IE, even in IE 6, 7 and 8 to a degree, but you have to remember that IE does NOT support some features , such as round corners, so you either have to know how to code, use conditionals, settle for what IE can do or get a decent browser.
3/ some features use CSS3, cutting edge which is beyond most IE, so again, accept the limitations or upgrade your browers, if you are a coder you know that and how to get around it.
4/ I suspect some people are trying to copy, cut and paste, which is fine if you know something about coding, but if you are a novice you may run into trouble as I don’t feel this is a “hold my hand” tutorial. So maybe be prepared to learn a it about HTML and CSS [it isn’t too difficult] or skip this a look for something that lays out everything so you can just copy and paste.

I have a working example at http://www.wpbeijing.com which you are more than welcome to work from but it isn’t a tut, there is no step by step although everything you need to know is there if you know where and how to look for it.
It’s also quite a bit different in style and design to the model here, but at the end of the day, all navs work on a similar basis so you can probably build your own.
Again, to the developer, thanks again, much appreciated.
Chris says:

Jun 6, 2012 at 3:24 am

This Code doesnt work!
The menu items arent displayed horizontally inline, the Text itself looks nasty, and the child menus are displayed leftmost of the screen, not below the option youre hovering over!
i dont know what script you used for that demo link, but its definitely not this one!
1. wordperfect says:
  
  Jun 6, 2012 at 5:36 am
  
  I believe it does Chris, as I said in my comment last week, I tested the original script from this site and it ran fine on F/Fox, Chrome, Safari and IE6, alth0ugh of course the SFX did not, as the designer states, render in IE. I build for IE6 as if it runs in that it doesn’t take much more to get in the later sisters.
  Is it possible you may have cut or missed something from the original code?
  1. Serge says:
    
    Jun 11, 2012 at 9:05 pm
    
    It does work but not with the style items shown in the original article. One needs to sneak to the style.css file to get latest – it has some major differences. I had same ‘results’ as descripbed before doing this. The gradient.png file also needs to be grabbed off the web site. Then you will need to tweak the href (and urls obviously).
    
    I can’t beleive how easy things become with a bit of CSS magic.
    
    Thanks for the great “tutorial”. Yes, minimal documentation makes it a little harder than cut and past.
Billa says:

Jun 9, 2012 at 6:46 am

Thanks for your code. It is working but little problems I can solve those problems. Once again for your valuable tutorial about css menus.
Greg B says:

Jun 11, 2012 at 8:21 am

hey Nick,

thanks for the tut..great. I worked a version up 2 weeks ago and was just about to make live.. then FireFox updated itself to version 13… and now won’t display the css3 properties of border-radius on the parent navigation list items. works in Chrome, IE.

is anybody has the same thing happening with FireFox 13??
Matt says:

Jun 15, 2012 at 2:44 am

In regards to Firefox 13, I’ve found that you need to use:
border-radius:XXpx (replace XX with size)
in your CSS to get the radius back.
Otherwise, works great!
Vishal says:

Jun 18, 2012 at 11:47 am

This is awesome. What a clean implementation. Drop down menus with zero client side script. Wow! Sorry, can’t hold my enthusiasm. This was the first time I got to know the power of CSS3.
amar says:

Jun 19, 2012 at 6:19 am

yaar download krne k liye to do…………………kewal demo de rhe ho
1. jitesh says:
  
  Jul 30, 2012 at 11:50 am
  
  @Amar….. view the source of the demo page and you’ll get the code…
  I don’t think you’r much of a nerd, so quit developing and become a motormechanic instead
Alex says:

Jun 21, 2012 at 11:51 am

Hello!
Nice job!
but in Firefox 13.0.1 something goes wrong with border-radius…
Ian Haney says:

Jun 28, 2012 at 8:18 am

Hi

I love this drop down menu so much better than another one I found on google

Only small problem is in firefox the buttons are not round on the main nav part, when the menu drops down its rounded but the main part isnt when hovered and not hovered over, and is the same in opera, works perfect in chrome

Any ideas anyone, please

Other than than, I love it, looks great
John says:

Jul 16, 2012 at 12:04 pm

I can’t get the menu to drop down or have round edges in ie9.
The demo works fine but when I put it on my site it doesn’t work!
Can anyone help?!!
Vany says:

Jul 20, 2012 at 5:53 am

I’m beginner of web dev.
I have a problem with my css code.
I want to put my dropdown menu after header,
but my submenu can’t display when my cursor directed here.
michael says:

Aug 9, 2012 at 2:31 pm

Hi!

I download the demo, looks nice. good work!

I noticed when I minimize the window (smaller) the menu buttons go down, top of each other. how can I fix it?
Alquiler yates Ibiza says:

Aug 12, 2012 at 9:31 am

The menu items arent displayed horizontally inline, the Text itself looks nasty, and the child menus are displayed leftmost of the screen, not below the option youre hovering over!
i dont know what script you used for that demo link, but its definitely not this one!
Naman Gupta says:

Aug 16, 2012 at 8:30 am

how to change color of the drop down menu
lakshmikanth vallampati says:

Aug 23, 2012 at 6:21 am

I need this one very urgent… Please Please Please… prodive the link to download the complete source code. Or please mail me the complete source code to my mail. The Demo is seems to be different…
betty says:

Aug 29, 2012 at 1:54 am

I think this article is not finished,the menu of the second and the third levers should be given the position.
tegatti says:

Sep 2, 2012 at 1:38 pm

Please, can someone help me how to find the css source?

Thanks in advance.
sarvesh says:

Sep 4, 2012 at 2:40 am

thanks for navigation bar example, its really very used for me
himu says:

Sep 6, 2012 at 4:14 am

Thanks for the post.
I am using this menu in one of my project. It just work fine.
Alquiler yates Ibiza says:

Sep 6, 2012 at 12:05 pm

Please, can someone help me how to find the css source?
annie says:

Sep 7, 2012 at 3:09 am

bagaimana cara masukin css di c# ?
agak bingung sedikit …

thanks in advance
David says:

Sep 19, 2012 at 1:42 pm

Thanks for the help it has offered me this article. I’m designing a template for a website of a friendship and this article could solve the problem or part of the menu of the.
Credit Card Transaction says:

Sep 22, 2012 at 12:26 pm

I think that everything said was actually very reasonable.

But, consider this, what if you were to create a awesome headline?
I ain’t saying your information isn’t solid., however suppose you added a title to possibly grab folk’s attention? I mean CSS3 Dropdown Menu is kinda plain. You might peek at Yahoo’s
home page and watch how they create post headlines to get viewers to
open the links. You might add a related video or a
related pic or two to grab readers excited about what you’ve got to say. In my opinion, it might bring your blog a little bit more interesting.
Scott says:

Nov 14, 2012 at 12:39 pm

Thanks for the tutorial. Although I’m half blind from trying to read the code in the .gif image it looks great on my site.
Please consider posting code instead of posting images of code, there is absolutely no benefit to using an image.
Bearko says:

Nov 20, 2012 at 7:42 am

This is great!.
I am trying to use this in a vertical menu system, but the sub menu appears behind the top menu links. Can you advise how to change this?
Each top menu is in its own because of my layout restrictions
Thanks in advance.
Ilija says:

Dec 4, 2012 at 7:32 pm

Great! Thanks, this is very flexibile and simply menu!
diwakar says:

Feb 2, 2013 at 3:05 am

if it is free then why you are not provide gradiant.png
Ankit says:

May 27, 2013 at 5:03 pm

Hi, I have tried the code. It works for all the browsers except Internet explorer. But the demo works on IE. Am i doing something wrong?

Comments are closed on this article.

Why the old hover-only dropdown no longer works

Step 1: Write the markup

Step 2: Style the bar, with the gradient in CSS

Step 3: Add the toggle script

Step 4: Make it work on small screens

Popover API and anchor positioning: Baseline status in 2026

Accessibility checklist

Where to go next

Bootstrap 5 Navbar with Multi-Level Dropdown Submenus

Bootstrap 5 Animated Menu with Sliding Indicator

Bootstrap 5 Sidebar Toggle Menu

Bootstrap 5 Restaurant Menu with Category Tabs